var VSHADER_SOURCE = [
    "attribute vec4 a_Position;",
    "uniform mat4 u_ProjMatrix;",
    "uniform float u_PointSize;",
    "void main() {",
    "    gl_PointSize = u_PointSize;",
    "    gl_Position = u_ProjMatrix * a_Position;",
    "}"

].join("\n")
var FSHADER_SOURCE = [
    'precision mediump float;',
    "uniform sampler2D u_Sampler;",
    "uniform float u_Angle;",
    "void main() {",
    "    float x=gl_PointCoord.x-0.5;",
    "    float y=gl_PointCoord.y-0.5;",
    "    float nx=(cos(u_Angle) * x - sin(u_Angle ) * y);",
    "    float ny = (sin( u_Angle ) * x + cos( u_Angle ) * y);",
    "    gl_FragColor = texture2D( u_Sampler, vec2( nx+0.5,ny+0.5) );",
    "}"
].join("\n")

function main() {
    var canvas = document.getElementById('webgl');
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL ');
        return;
    }
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }
    var projMatrix4 = new Matrix4();
    projMatrix4.setOrtho(-1, 1, -1, 1, 0.0, 1.0);
    var u_projMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
    gl.uniformMatrix4fv(u_projMatrix, false, projMatrix4.elements);
    var u_Angle = gl.getUniformLocation(gl.program, 'u_Angle');
    gl.uniform1f(u_Angle, 3.14 * 0.25);
    //gl.uniform1f(u_Angle, 3.14 * 0.0);
    var position = gl.getAttribLocation(gl.program, 'a_Position');
    gl.vertexAttrib3f(position, 0.0, 0.0, 0.0);

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    loadImg(gl);

}

function loadImg(gl) {
    var image = new Image();
    image.onload = function() {
        drawPic(gl, image)
    }
    image.src = "pic.png";
}

function drawPic(gl, image) {
    var width = image.width;
    var height = image.height;

    var pointSize = gl.getUniformLocation(gl.program, "u_PointSize");
    gl.uniform1f(pointSize, Math.max(width, height));

    var texture = gl.createTexture();
    //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    gl.uniform1i(gl.getUniformLocation(gl.program, "u_Sampler"), 0);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, 1);

    gl.bindTexture(gl.TEXTURE_2D, null);
}
setTimeout(() => {
    main();
}, 3000);